<template>
	<view class="commodity">
		<partTitle :title="'热卖产品'"></partTitle>
		<view class="commodity_content">
			<view hidden>
			    <!--这里通过载入图片调用方法， 默认传参带有图片信息，可以获得图片高度-->
			    <block v-for="item in imgList" :key="item.id">
			        <image :src="item.img" @load="loadImg" ></iamge>
			    </block>
			</view>
			<view class="list" v-for="(list, key) in waterfall" :key="key">
				<navigator v-for="item in list.list" >
					<commodityItem :item="item" :key="item.id"></commodityItem>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @@param {Array} waterfall 瀑布流数组
	 * @@param {Array} lists 拷贝后的用于操作的数据
	 * @@param {components} commodityItem 商品item
	 * @@param {Array} imgList 要预加载的图片
	 */
	import commodityItem from '../../wxcomponents/index/commodityItem.vue'
	import partTitle from '@/wxcomponents/index/partTitle.vue'
	export default {
			components:{commodityItem,partTitle},
	        // 抽出为单独的组件，所以数据来源于父组件传递，也可以是当前组件请求API
	        props: { imgList: Array },
	        data(){
	            return {
	                lists: [], // 备份imgList用的数组，方便操作
	                waterfall: [
	                    // 用于记录当前列的高度，不在方法中保存是为了上拉获取新数据也能使用
	                    {
	                        height: 0, 
	                        list: []
	                    },{
	                        height: 0, 
	                        list: []
	                    }
	                ]
	            }
	        },
	        created(){
	            this.lists = [...this.imgList]; // Vue创建data后立即备份
				//console.log(this.lists,this.imgList)
	        },
	        watch:{
	            // 监听数据源，如果有新值传入，则用lists数组备份
	            imgList(newData,oldData){
					//分离出新增的数据
					let data = newData.splice(oldData.length)
	            	data.length && this.lists.push(...data) 
	            }
	        },
	        methods: {
	            loadImg(e){
	                let Root = this.waterfall;
	                let height = e.detail.height;
	                // 根据当前高度决定将新数据给谁，并更新列高度；优先插入左侧
	                if(Root[0].height <= Root[1].height){
	                    // 考虑热度优先的问题， 所以用的是shift()方法推出头部数据。
	                    Root[0].list.push(this.lists.shift())
	                    Root[0].height += height;
	                } else {
	                    Root[1].list.push(this.lists.shift())
	                    Root[1].height += height;
	                }
					//console.log(this.waterfall)
					console.log('当前的list')
					console.log(this.lists)
	            }
	        }
	    }
</script>

<style lang="less">
	.commodity_content{
		width: 100%;
		/*height: 50rem;*/
		display: flex;
		justify-content: space-around;
		margin: 1rem 0;
	}
	.list{
		width: 45%;
	}
</style>